<template>
  <el-select
      v-loading="loading"
      v-model="value"
      :disabled="disabled"
      :clearable="!field.not_null"
      :teleported="false"
      filterable
      :value-on-clear="null"
      :multiple="field.refer?.multiple"
      :collapse-tags="field.refer?.multiple"
      :collapse-tags-tooltip="field.refer?.multiple"
      :show-checkbox="field.refer?.multiple"
      :check-strictly="field.refer?.strict"
  >
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
      <!-- 选项内容 -->
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import {computed, ref, watch} from "vue";
import type {MetaField} from "../../../types/cell.types";

const props = defineProps<{
  modelValue: any,
  disabled: boolean,
  field: MetaField
}>();

const emit = defineEmits(['update:modelValue'])

const value = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v)
})

// 选项数据
const loading = ref(false);
const options = ref([]);

// 模拟加载选项数据
watch(() => props.field, () => {
  if (props.field.refer?.options) {
    options.value = props.field.refer.options;
  }
}, {immediate: true});
</script>

<style scoped>

</style>